<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			background: #000;
			color: #fff;
		}

		.container {
			width: 80%;
			margin: 1em auto;
			line-height: 2;
			text-indent: 2em;
			position: relative;
		}

		.eraser {
			position: absolute;
			inset: 0;
		}

		.text {
			--p: 0%;
			background: linear-gradient(to right, #0000 var(--p), #000 calc(var(--p) + 30px));
			color: transparent;
			animation: erase 5s linear forwards;
		}

		/* Houdini API */
		@property --p {
			syntax: '<percentage>';
			initial-value: 0%;
			inherits: false;
		}

		@keyframes erase {
			to {
				--p: 100%;
			}

		}
	</style>
</head>

<body>
	<div class="container">
		<div>
			白马带着她一步一步地回到中原，白马已经老了，只能慢慢地走，但是终是能回到中
			原的，江南有杨柳，桃花，燕子，金鱼……**中有的是英俊勇武的少年，倜
			傥潇洒的少年……但这个美丽的姑娘，就像高昌国人那样固执，那些都是很好很好
			的，可是我偏不喜欢。
		</div>
		<div class="eraser">
			<span class="text">
				白马带着她一步一步地回到中原，白马已经老了，只能慢慢地走，但是终是能回到中
				原的，江南有杨柳，桃花，燕子，金鱼……**中有的是英俊勇武的少年，倜
				傥潇洒的少年……但这个美丽的姑娘，就像高昌国人那样固执，那些都是很好很好
				的，可是我偏不喜欢。
			</span>
		</div>
	</div>
</body>

</html>